<template>
      <div class="esg-area clr-black">
            <Header :isTransparentBackground="false"></Header>
            <div class="pt-gap-comm esg-main-box">
                  <!-- banner 及 辅助导航栏 开始 -->
                  <PageBanner pictureLink="https://www.tencent.com/img/esg/esg-banner.jpg" :dataIndex="3"
                        major-heading="环境、社会与治理"
                        auxiliary-title="京咛致力于通过科技创新来促进环境可持续发展，解决社会问题，提高公司治理透明度。"></PageBanner>
                  <!-- banner 及 辅助导航栏 结束 -->
                  <div class="esg-purpose-area bg-write comm-tb-gap">
                        <div class="constraint">
                              <h3 class="ft-center">
                                    <q>我们永承创新使命,推动创新发展及创造有利社会价值</q>
                              </h3>
                              <p class="ft-rgt">京咛首席执行官范鑫鹏</p>
                        </div>
                  </div>

                  <template v-for="(esgItem, esgIndex) in headerList[3].subList" :key="esgIndex">
                        <component :id="esgItem.anchor_point" :is="data.componentList[esgIndex].componentName" 
                        :moduleTitle="esgItem.sub_text" />
                  </template>
            </div>
            <CopyRight></CopyRight>
      </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { headerList } from '@/config/assets.config'
// 导航栏组件
import Header from '@/components/client/common/header/index.vue';
// 版权组件
import CopyRight from '@/components/client/common/copyright/index.vue';

import PageBanner from '@/components/client/common/pageBanner/index.vue'

import Environment from '@/components/client/esg/environment.vue'
import Society from '@/components/client/esg/society.vue'
import Govern from '@/components/client/esg/govern.vue'
import Rating from '@/components/client/esg/rating.vue'
import Report from '@/components/client/esg/report.vue'

let data = reactive({
      componentList: [
            { componentName: Environment}, 
            { componentName: Society }, 
            { componentName: Govern },
            { componentName: Rating },
            { componentName: Report }
      ]
})

</script>